<template>
  <div>
    <nav-bar ref="navBar" :title="title" :isShow="false"></nav-bar>
    <van-skeleton title :row="15" style="margin-top: 20px" :loading="loading">
      <van-collapse id="case" v-model="activeNames">
        <van-collapse-item :title="title" name="1">
          <van-form>
            <van-field
              v-model="form.case_type_name"
              name="case_type_name"
              label="案件类型:"
              placeholder="案件类型"
            />
            <van-field
              v-model="form.client"
              name="client"
              label="委托人:"
              placeholder="委托人"
            />
            <van-field
              v-model="form.telephone"
              name="telephone"
              label="联系电话:"
              placeholder="联系电话"
            />
            <van-field
              v-model="form.party"
              name="party"
              label="当事人:"
              placeholder="当事人"
            />
            <van-field
              v-model="form.reason"
              name="reason"
              label="案由:"
              placeholder="案由"
            />
            <van-field
              v-model="form.recv_lawyer"
              name="recv_lawyer"
              label="收案人:"
              placeholder="收案人"
            />
            <van-field
              v-model="form.court"
              name="court"
              label="管辖法院:"
              placeholder="管辖法院"
            />
            <van-field
              v-model="form.level"
              name="level"
              label="审级:"
              placeholder="审级"
            />
            <van-field
              v-model="form.lead_lawyer_name"
              name="lead_lawyer_name"
              label="主办律师:"
              placeholder="主办律师"
            />
            <van-field
              v-model="form.assist_lawyer_name"
              name="assist_lawyer_name"
              label="出庭律师:"
              placeholder="出庭律师"
            />
            <van-field
              v-model="form.third_lawyer_name"
              name="third_lawyer_name"
              label="出庭律师:"
              placeholder="出庭律师"
            />
            <van-field
              v-model="form.register_time"
              name="register_time"
              label="立案时间:"
              placeholder="立案时间"
            />
            <van-field
              v-model="form.open_time"
              name="open_time"
              label="开庭时间:"
              placeholder="开庭时间"
            />
          </van-form>
        </van-collapse-item>
        <van-collapse-item title="案件进展情况" name="2">
          <div class="content">
            <van-steps direction="vertical" :active="0">
              <van-step v-for="item in progresses" :key="item.id">
                <div class="title">{{ item.progress_name }}</div>
                <div class="time">{{ item.add_time }}</div>
              </van-step>
            </van-steps>
          </div>
        </van-collapse-item>
        <van-collapse-item title="授权二维码" name="3" v-if="show_qrcode">
          <div class="content">
            <img :src="img_case_url" style="width: 100%" />
            <h3 style="text-align: center">案件授权</h3>
          </div>
        </van-collapse-item>
      </van-collapse>
      <div style="margin: 16px">
        <van-button round block type="info" @click="onClick">返回</van-button>
      </div>
    </van-skeleton>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar";
import { getCaseById, getClientCaseById } from "@/api/case";
import { show_qrcode_with_logo } from "@/api/utils";
import { isMemberRole } from "@/utils/session";

export default {
  name: "CaseDetail",
  components: {
    NavBar,
  },
  props: {
    case_id: String,
  },
  data() {
    return {
      title: this.$route.meta.title,
      activeNames: ["1"],
      progresses: [],
      img_case_url: "", //二维码地址
      loading: true,
      show_qrcode: false,
      form: {
        code: null,
        client: null,
        telephone: null,
        paryt: null,
        case_type: null,
        case_type_name: null,
        recv_lawyer: null,
        reason: null,
        court: null,
        level: null,
        lead_lawyer: null,
        lead_lawyer_name: null,
        assist_lawyer: null,
        assist_lawyer_name: null,
        third_lawyer: null,
        third_lawyer_name: null,
        register_time: null,
        open_time: null,
        progresses: [],
      },
    };
  },
  computed: {},
  methods: {
    getCaseDetial() {
      let FN_CASE_INFO = null;
      if (this.show_qrcode) {
        FN_CASE_INFO = getCaseById;
      } else {
        FN_CASE_INFO = getClientCaseById;
      }
      FN_CASE_INFO(this.case_id)
        .then((res) => {
          this.form = res.data;
          this.progresses = this.form.progresses.reverse();
          this.loading = false;
        })
        .catch((error) => {
          if (error.response) {
            this.$notify({ type: "warning", message: error.response.data });
          } else {
            this.$notify({ type: "warning", message: "读取案件详情失败" });
          }
        });
    },
    is_show_qrcode() {
      this.show_qrcode = isMemberRole();
    },
    onClick() {
      this.$refs.navBar.onClickLeft();
    },
    getCaseQRCode() {
      if (!this.show_qrcode) return;

      const url = `http://${window.location.host}/#/case/auth/${this.case_id}`;

      show_qrcode_with_logo(url)
        .then((res) => {
          return (
            "data:image/png;base64," +
            btoa(
              new Uint8Array(res.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then((data) => {
          this.img_case_url = data;
        });
    },
  },
  created() {
    console.log(this.case_id);
    this.is_show_qrcode();
    this.getCaseDetial();
    this.getCaseQRCode();
  },
};
</script>

<style  scoped>
.content {
  padding: 0px 16px;
}
</style>